<template>
    <view class="app-foot">
        <view :style="barStyle">
            <view :class="data.card == 1 ? 'foot-bar' : ''" class="main-center cross-center" style="height: 100%;" :style="{'background-color': data.card == 1 ? data.card_color : ''}">
                <view @click="router('/pages/favorite/favorite')" class="foot-bar-item" :class="data.style == 1 ? 'dir-top-nowrap main-center cross-center' : 'dir-right-nowrap main-center cross-center'">
                    <view :style="numberStyle">{{favorite}}</view>
                    <view class="foot-box-info main-center cross-center" :class="data.style == 2 ? 'style-2':''">
                        <image v-if="data.mode == 1" :src="data.favorite_icon"></image>
                        <view :style="titleStyle">我的收藏</view>
                    </view>
                </view>
                <view class="foot-line" :style="{'background-color': data.line_color}"></view>
                <view @click="router('/pages/foot/index/index')" class="foot-bar-item" :class="data.style == 1 ? 'dir-top-nowrap main-center cross-center' : 'dir-right-nowrap main-center cross-center'">
                    <view :style="numberStyle">{{footprint}}</view>
                    <view class="foot-box-info main-center cross-center" :class="data.style == 2 ? 'style-2':''">
                        <image v-if="data.mode == 1" :src="data.foot_icon"></image>
                        <view :style="titleStyle">我的足迹</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {mapState, mapGetters} from 'vuex';
    export default {
        name: "app-foot",
        props: {
            value: Object,
            bg: Object
        },
        data() {
            return {
                height: 136,
                data: {}
            }
        },
        computed: {
            ...mapState({
                mall: state => state.mallConfig.mall,
                is_vip_card_user: function(state) {
                    return state.user.info && state.user.info.is_vip_card_user ? 1 : 0;
                }
            }),
            ...mapGetters({
                userInfo: 'user/info',
            }),
            favorite() {
                let value = 0;
                if(this.userInfo) {
                    value = this.handleNumber(this.userInfo.favorite)
                }
                return value
            },
            footprint() {
                let value = 0;
                if(this.userInfo) {
                    value = this.handleNumber(this.userInfo.footprint)
                }
                return value
            },
            barStyle() {
                this.height = this.data.card == 0 ? this.data.style == 2 ? 112 : 136 : this.data.style == 2 ? 144 : 184;
                let style = `height: ${this.height}rpx;margin-top: ${this.data.margin}rpx;`;
                if(this.data.card == 1) {
                    style += `padding: ${this.data.card_margin}rpx 20rpx;`
                }
                if(this.data.bg == 1) {
                    if(this.data.bg_style == 1) {
                        style += `background-color: ${this.data.bg_color};`
                    }else {
                        style += `background-image: url("${this.data.bg_pic}");background-size: 100% 100%;`
                    }
                }
                return style;
            },
            numberStyle() {
                let style = `color: ${this.data.number_color};font-size: ${this.data.number_size}rpx;`;
                return style;
            },
            titleStyle() {
                let style = `color: ${this.data.title_color};font-size: ${this.data.title_size}rpx;`;
                return style;
            }
        },
        created() {
            this.data = JSON.parse(JSON.stringify(this.value));
        },
        methods: {
            router(url) {
                uni.navigateTo({
                    url: url
                });
            },
            handleNumber(number) {
                let num = +number;
                num = num.toFixed(2)
                let result = 0;
                if(number > 0) {
                    if(number < 10000 && number > 999.99) {
                        result = num.replace(num[0], num[0] + ',')
                    }else if (number > 10000) {
                        result = num.substring(0,num.length - 7) + '.' + num[num.length - 7] + 'w'
                    }else {
                        result = num
                    }
                    if(result.indexOf('.00') > -1) {
                        result = result.replace('.00', '')
                    }
                    return result
                }else {
                    return 0;
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .app-foot {
        .foot-line {
            width: 2rpx;
            height: 56rpx;
            opacity: 0.5;
        }
        .foot-bar {
            border-radius: 16rpx;
            box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);
        }
        .foot-bar-item {
            display: flex;
            flex-shrink: 1;
            flex-grow: 1;
        }
        .foot-box-info {
            height: 36rpx;
            margin-top: 10rpx;
            &.style-2 {
                margin-top: 0;
                margin-right: 24rpx;
            }
            image {
                margin-right: 10rpx;
                display: block;
                width: 36rpx;
                height: 36rpx;
            }
        }
    }
</style>